<template>
  <div class="top">
    <div class="top_left">
      <router-link to="/" class="home-link">首页</router-link>
      <div class="logo">青书</div>
      <div class="top_left_right">专业号平台</div>
    </div>
    <div class="top_right">
      <img :src="user.avatarUrl" alt="用户头像" class="user-avatar">
      <div class="username">{{ user.name }}</div>
      <div class="user-id">{{ user.username }}</div>
    </div>
  </div>
  <div class="main-content">
    <el-menu
      mode="vertical"
      background-color="#fff"
      text-color="#333"
      active-text-color="#409EFF"
      :default-active="currentMenuIndex" 
      @select="handleMenuSelect">
      <el-menu-item index="1">
        <router-link to="/professionhome" class="menu-link">首页</router-link>
      </el-menu-item>
      <el-sub-menu index="2">
        <template #title>营销工具</template>
        <el-menu-item index="2-1">门店管理</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>账号管理</template>
        <router-link to="/certification" class="menu-link">
          <el-menu-item index="3-1">专业号认证/年审</el-menu-item>
        </router-link>
      </el-sub-menu>
      <el-menu-item index="4">平台操作日志</el-menu-item>
    </el-menu>
    <router-view class="center" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useAuthStore } from '@/store/auth'
import { useRoute } from 'vue-router'

const authStore = useAuthStore()
const route = useRoute()

const user = ref(authStore.user || {
  name: '用户',
  username: 'username',
  avatarUrl: 'https://via.placeholder.com/40'
})
</script>

<style scoped>
.menu-link {
  text-decoration: none;
  color: #333;
}
.menu-link:hover {
  color: #409EFF;
}
.home-link {
  color: #666;
  text-decoration: none;
  font-size: 14px;
  margin-right: 20px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s;
}
.home-link:hover {
  color: #409EFF;
  background-color: #f0f7ff;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.top_left {
  display: flex;
  align-items: center;
}
.logo {
  width: 100px;
  text-align: center;
  background-color: #06eacc;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 20px;
  font-weight: bold;
  margin-right: 20px;
}
.top_left_right {
  font-size: 20px;
  font-weight: 500;
  color: #333;
}
.top_right {
  display: flex;
  align-items: center;
}
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 8px;
  object-fit: cover;
}
.username {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-right: 8px;
}
.user-id {
  font-size: 12px;
  color: #666;
}
.el-menu--vertical {
  width: 220px;
}
.main-content {
  display: flex;
  gap: 20px;
  padding: 20px;
  background-color: #f9f9f9;
  min-height: calc(100vh - 60px);
}
.center {
  flex: 1;
  background-color: #fff;
  padding: 60px 60px;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
</style>